<template>
  <div>
      <home-header></home-header>
      <home-swiper :list="swiperList"></home-swiper>
      <home-icons :list="iconList"></home-icons>
      <home-recommend :list="recommendList"></home-recommend>
      <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from './components/header'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend'
import HomeWeekend from './components/weekend'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
    name:'Home',
    components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend
    },
    data(){
        return{
            swiperList:[],
            iconList:[],
            recommendList:[],
            weekendList:[],
            lastcity:''
        }
    },
    computed:{
        ...mapState(['city'])
    },
    methods:{
        getHomeInfo(){
            // axios.get('/static/mock/index.json')
            //这里在实际的开发中应该是不同的city返回不同的内容，所以要加查询参数，这里配合了vuex
            axios.get('/static/mock/index.json?city='+this.city)
            .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res){
            res=res.data;
            if(res.ret&&res.data){
                const data=res.data;
                this.swiperList=data.swiperList;
                this.iconList=data.iconList;
                this.recommendList=data.recommendList;
                this.weekendList=data.weekendList
            }
        }
    },
    mounted(){//第一次加载时发ajax请求
        this.lastcity=this.city;
        this.getHomeInfo()
    },
    activated(){//因为<keep-alive>缓存了数据，因此第二次返回页面
                //时ajax不会从新发送，所以用这个生命周期钩子来完成后续的ajax请求，
                //当后续city不等于当前city时触发ajax
        if(this.lastcity !== this.city){
            this.lastcity=this.city;
            this.getHomeInfo()
        }
    }
}
</script>

<style scoped>
 
</style>